<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorator="layout">
<head>
<style type="text/css">
div label{
	line-height:30px;
	vertical-align:top;
}
div .inline-box{
	line-height:30px;
}
div.audio{
	display:flex;
	display:-webkit-flex;
	-webkit-flex-wrap: wrap;
	flex-flow:wrap;
	flex-direction: row;
	width: 98%;
	padding: 0 5%;
}	
div.item{
    width:15%;
    margin-right: 5%;
    margin-bottom: 20px;
    display:flex;
    display:-webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-flow:wrap;
    justify-content:flex-start;
    align-items: center;
    cursor: pointer;
    padding:2% 0;
}

div.audio-info{
    text-align: center;
    width: 100%;
    position:relative;
}
div.audio-info img{
    width:90%;
    display: inline-block;
}
div.audio-info span{
    width:100%;
    margin-top: 10px;
    font-size: 12px;
    font-weight: bolder;
    cursor: pointer;
    color: #1c1a1e;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    height: 14px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
}
</style>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
function to_add(){
	$("#form1").submit();
}
function to_logout(){
	$.ajax({
        url: '/user/logout',
        type: 'POST',
        crossDomain: true,
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
     	   'uid': sessionStorage.getItem('uid'),
           'token': sessionStorage.getItem('token')
        }),
        success: function (r) {
          if (r.header.code === '200' || r.header.code === '202') {
         	 sessionStorage.clear();
             localStorage.clear();
                     
            
            window.parent.location.href="../login.html";
          } 
        }
 	})	
}
/*]]>*/
</script>
</head>
<body>
	<section layout:fragment="chcontent">
		<div>
			<div class="clearfix"></div>
			<div class="row">
				<div class="col-md-12">
					<div class="x_panel">
						<div class="x_title">
							资源打包列表
							<div class="pull-right" style="margin-top: -5px;">								
								<a onclick="to_add()">
									<div style="width:50%;display:inline;">
										<i class="fa fa-angle-left"></i> &nbsp;添加&nbsp;&nbsp;
									</div>
								</a>
								<a onclick="to_logout()">
									<div style="width:50%;display:inline;">
										<i class="fa fa-angle-left"></i> &nbsp;退出&nbsp;&nbsp;
									</div>
								</a>
							</div>
						</div>
						<div class="x_content">
							<form class="form-inline" style="height:0px;" id="form1" th:action="@{/createPackage}" th:method="post"></form>
							<div class="audio" th:if="${not #lists.isEmpty(ziplist)}">
								<div class="item" th:each="zipname:${ziplist}">
									<div class="audio-info" >
				                        <img th:src="@{/image/folder.png}"/>
				                        <span th:title="${zipname}" th:text="${zipname}"></span>
				                    </div> 
				                </div> 
			                </div>
			                <div class="audio" th:if="${not #lists.isEmpty(excellist)}">
				                <div class="item" th:each="excelname:${excellist}">
				                    <div class="audio-info">
				                        <img th:src="@{/image/file.png}"/>
				                        <span th:title="${excelname}" th:text="${excelname}"></span>
				                    </div>
				                </div>
				            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>
</html>